<template>
    <div class="tuijian_box">
        <div class="carousel_box">
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item class="carousel" v-for="item in images" :key="item.imageUrl">
                    <img :src="item.imageUrl" id="tupian_1">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div id="gedan_1">
            <h1 style="margin:10px 0">推荐歌单</h1>
            <i class="el-icon-arrow-right"></i>
        </div>
        <gedan :gedan_7="musicList"></gedan>
    </div>
</template>
<script>
import gedan from '../../gongyong/gedan.vue'
import {getBanner,getGedan} from '../../request/api/lunbo'
export default {
    components: { gedan },
    name:'tuijian',
    data() {
        return {
            images:[],
            musicList:[]
        }
    },
    methods: {
        async getBanner(){
            let res = await getBanner();
            // console.log(res)
            this.images = res.data.banners
            // console.log(this.images)
        },
        async getGedan(){
            let res = await getGedan();
            // console.log(res)
            this.musicList = res.data.result
            // console.log(this.musicList)
        },
    },
    mounted() {
        this.getBanner()
        this.getGedan()
    },
    //vue3的语法
    // setup() {
    // const images = [
    //   'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    //   'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    // ];
    // return { images };
}
</script>
<style lang="less" scoped>
.carousel{
    border-radius: 10px;
    overflow: hidden;
    img{
    width: 100%;
    height: 100%;
    }
}
.tuijian_box{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}
#gedan_1{
    width: 100%;
}
#gedan_1 h1{
    display: inline-block;
}
// .gedan_2{
//     width: 100%;
//     ul{
//         width: 100%;
//         display: flex;
//         flex-direction: row;
//         justify-content: space-between;
//         flex-wrap: wrap;
//         li{
//             position: relative;
//             width: 18%;
//             border-radius: 5px;
//             overflow: hidden;
//         }
//         img{
//             width: 100%;
//             height: 80%;
//         }
//     }
// }
// .bfl{
//     position: absolute;
//     margin-top: -170px;
//     margin-left: 95px;
//     color: white;
//     font-size: 10px;
// }

</style>